<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.0</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    </head>
    <body>
    <blockquote class="layui-elem-quote">欢迎管理员：
        <span class="x-red" th:text="${session.admin.aname}"></span><span id="sj">！当前时间:2018-04-25 20:50:53</span></blockquote>
    <div id="main" style="margin-left: 100px; width: 70%;height:800px;"></div>
    <div>
    </div>
    <div class="message" style="opacity:0"></div>
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

    <script>
        function dateFormat(fmt, date) {
            let ret;
            let opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        }
        setInterval(function () {
            $("#sj").html(dateFormat("YYYY-mm-dd HH:MM:SS", new Date()))
        },1000)
        $.ajax({
            url:"getCheckNumber",
            dataType:"json",
            method:"post",
            success:function (res) {
                var myChart = echarts.init(document.getElementById('main'));
                var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
                option = {
                    backgroundColor: '#0e2147',
                    grid: {
                        left: '5%',
                        top: '12%',
                        right: '5%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: [{
                        show: false,
                    }],
                    yAxis: [{
                        axisTick: 'none',
                        axisLine: 'none',
                        offset: '27',
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff',
                                fontSize: '16',
                            }
                        },
                        data:res.name
                    }, {
                        axisTick: 'none',
                        axisLine: 'none',
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff',
                                fontSize: '16',
                            }
                        },
                        data: res.ranking
                    }, {
                        name: '产品浏览统计TOP 10',
                        nameGap: '50',
                        nameTextStyle: {
                            color: '#ffffff',
                            fontSize: '16',
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                        data: [],
                    }],
                    series: [{
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: res.checkNumber,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: '#ffffff',
                                    fontSize: '16',
                                }
                            }
                        },
                        barWidth: 12,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num]
                                },
                            }
                        },
                        z: 2
                    }, {
                        name: '白框',
                        type: 'bar',
                        yAxisIndex: 1,
                        barGap: '-100%',
                        data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: '#0e2147',
                                barBorderRadius: 5,
                            }
                        },
                        z: 1
                    }, {
                        name: '外框',
                        type: 'bar',
                        yAxisIndex: 2,
                        barGap: '-100%',
                        data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                        barWidth: 24,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num]
                                },
                                barBorderRadius: 5,
                            }
                        },
                        z: 0
                    },
                        {
                            name: '外圆',
                            type: 'scatter',
                            hoverAnimation: false,
                            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                            yAxisIndex: 2,
                            symbolSize: 35,
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        var num = myColor.length;
                                        return myColor[params.dataIndex % num]
                                    },
                                    opacity: 1,
                                }
                            },
                            z: 2
                        }
                    ]
                };
                myChart.setOption(option);
            }
        })
        setTimeout(function () {
            window.location.reload()
        },1000*60*5)
        L2Dwidget.init({
            "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-koharu/assets/koharu.model.json",
                "scale": 1
            },
            "display": {
                "position": "right",
                "width": 150,
                "height": 300,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.5,
                "opacityOnHover": 0.2
            }
        });
    </script>
    </body>
</html>